﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="source/ui.jqgrid.css" rel="stylesheet" />
    <link href="../UiThemes/themes/redmond/jquery-ui.min.css" rel="stylesheet" />
    <link href="../UiThemes/themes/redmond/theme.css" rel="stylesheet" />
    <script src="source/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>
    <script src="source/jquery-ui-1.10.4.custom.min.js"></script>
    <script src="source/grid.locale-en.js"></script>
    <script src="source/jquery.jqGrid.min.js"></script>

</head>
<body>
    <table id="list2"></table>
    <div id="pager2"></div>
</body>
</html>
<script>

    $(function () {
        jQuery("#lists2").jqGrid({
            url: 'Ajax.aspx?tag=summary',
            datatype: "json",
            colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
            colModel: [
                { name: 'id', index: 'id', width: 55 },
                { name: 'invdate', index: 'invdate', width: 90 },
                { name: 'name', index: 'name asc, invdate', width: 100 },
                { name: 'amount', index: 'amount', width: 80, align: "right", formatter: 'number' },
                { name: 'tax', index: 'tax', width: 80, align: "right", formatter: 'number' },
                { name: 'total', index: 'total', width: 80, align: "right", formatter: 'number' },
                { name: 'note', index: 'note', width: 150, sortable: false }
            ],
            gridComplete: function (v) {
                var i = v;
            },
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#pagers2',
            sortname: 'id',
            viewrecords: true,
            sortorder: "desc",
            caption: "JSON Example",
            footerrow: true,
            userDataOnFooter: true,
            altRows: true
        });
        jQuery("#lists2").jqGrid('navGrid', '#pagers2', { edit: false, add: false, del: false });
    })
</script>
